<template>
    <div style="width: 100%;">
        <el-form :disabled="dialogType==='view'" ref="form" size="small" :model="formData" :rules="rules"
                 label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="中文名称" prop="nameCn">
                        <el-input v-model="formData.nameCn"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="属性类型" prop="columnType">
                        <el-select style="width: 98%" v-model="formData.columnType">
                            <template v-for="item in columnTypeList">
                                <el-option :value="item.type" :label="item.name"></el-option>
                            </template>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="英文名称" prop="nameEn">
                        <el-input v-model="formData.nameEn"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="编码标识" prop="name">
                        <el-input :disabled="dialogType!=='add'" v-model="formData.name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="英文描述">
                        <el-input v-model="formData.describeEn"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="中文描述" prop="describeCn">
                        <el-input v-model="formData.describeCn"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row v-if="formData.columnType&&formData.columnType!=='date'">
                <el-col :span="12">
                    <el-form-item label="长度">
                        <el-input-number style="width: 100%" :min="1" v-model="formData.length"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="formData.columnType&&formData.columnType==='decimal'">
                    <el-form-item label="精度">
                        <el-input-number style="width: 100%" :min="0" v-model="formData.accuracy"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-col :span="24">
                <el-form-item label="校验表达式">
                    <el-input v-model="formData.validation"></el-input>
                </el-form-item>
            </el-col>
        </el-form>

        <div class="md-component-btns">
            <el-button v-if="dialogType==='view'" size="medium" type="primary"
                       @click="()=>{$emit('viewToEdit'),dialogType='edit'}">编辑
            </el-button>
            <el-button v-if="dialogType!=='view'" size="medium" type="primary" @click="save">保存</el-button>
            <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
        </div>
    </div>
</template>

<script>
import * as api from "@/api/modulManage/attributeClassify"

export default {
    name: "PropertiesClassifyTemp",
    data() {
        return {
            formData: {
                "name": "",
                "nameCn": "",
                "nameEn": "",
                "describeCn": "",
                "describeEn": "",
                "columnType": "",
                "accuracy": 0,
                "length": 1,
                "sole": "",
                "multi": "",
                "validation": ""
            },
            rules: {
                name: [{
                    required: true,
                    message: "请输入编码标识",
                    trigger: "blur"
                }, {pattern: '^[A-Za-z][A-Za-z0-9_]{1,29}$', message: '请输入正确编码标识'}],
                nameCn: [{required: true, message: "请输入中文名称", trigger: "blur"}],
                describeCn: [{required: true, message: "请输入中文名称", trigger: "blur"}],
                columnType: [{required: true, message: "请选择属性类型", trigger: "change"}],
            },
            dialogType: "add",

            columnTypeList: []
        }
    },
    methods: {
        save() {
            let method = this.dialogType === "add" ? "add" : "update";
            this.$refs["form"].validate(f => {
                if (f) {
                    api[method](this.formData).then(() => {
                        this.$message.success("保存成功");
                        this.$emit('refresh');
                        this.$emit('removeThisTabs');
                    })
                }
            })
        },

        edit(row) {
            this.dialogType = "edit";
            api.getDetail({oid: row.oid}).then(res => {
                Object.assign(this.formData, res.data.data);
            })
        },
        view(row) {
            this.dialogType = "view";
            api.getDetail({oid: row.oid}).then(res => {
                Object.assign(this.formData, res.data.data);
            })
        },
        open() {
            this.resetForm();
            this.dialogType = "add";
        },
        close() {
        },

        resetForm() {
            this.formData = {
                "name": "",
                "nameCn": "",
                "nameEn": "",
                "describeCn": "",
                "describeEn": "",
                "columnType": "",
                "accuracy": 0,
                "length": 1,
                "sole": "",
                "multi": "",
                "validation": ""
            }
        }
    },
    mounted() {
        api.getColumnType().then(res => {
            this.columnTypeList = res.data.data;
        })
    }
}
</script>

<style scoped>

</style>
